<template>
    <div id="professionList">
        <div id="professionListbody" v-if="showMsg == 1">
            <div class="pro-list-left">
                <div v-for="(i,index) in jobMsgList" :key="i" class="job-card">
                    <div class="job-card-top">
                        <div class="c-top-left">
                            <div>
                                <span class="jobName" @click="toJobDetail(index)"
                                @mouseover="jobShow(index)" @mouseout="jobHide(index)">
                                    {{i.name}}
                                </span>
                                <div class="part-time job-type-btn" v-if="checkdata.type == 2">兼职</div>
                                <div class="un-job job-type-btn" v-if="checkdata.type == 3">实习</div>
                            </div>
                            <div style="margin-top: 12px;">
                                <span class="jobSalary">{{i.min}}-{{i.max}}{{i.salaryUnit}}/{{i.unitObj.name}}</span>
                                <span class="jobDetail">{{i.expObj.name}} | {{i.eduObj.name}}</span>
                            </div>
                        </div>
                        <div class="c-top-right">
                            <div class="com-msg">
                                <p class="jobName">
                                    {{i.comDoc.abbrName}}
                                </p>
                                <p class="jobDetail" style="margin-top:12px">
                                    {{i.comDoc.tradeObj.name}} | {{i.comDoc.financeObj.name}} | {{i.comDoc.scaleObj.name}}
                                </p>
                            </div>
                            <div class="com-tx">
                                <img :src="'https://res.mashangu.com/'+i.comDoc.img" alt="">
                            </div>
                        </div>
                    </div>
                    <div class="job-card-bottom">
                        <p class="job-require" style="margin-right:30px"
                        v-html="i.note"></p>
                        <div class="job-require">
                            <span v-if="i.comDoc.otherBenefitList == null">暂无</span>
                            <span v-else v-for="(b,index) in i.comDoc.otherBenefitList" :key="b">
                                <span v-if="index < i.comDoc.otherBenefitList.length-1">{{b}}，</span>
                                <span v-else>{{b}}</span>
                            </span>
                        </div>
                    </div>

                    <div class="job-name-detail" :class="{jobDShow:jIndex==index}">
                        <div class="jon-name-top">
                            <p class="jname">
                                {{i.name}}
                            </p>
                            <p class="cname">
                                {{i.comDoc.abbrName}}
                            </p>
                        </div>
                        <div class="jon-name-bottom">
                            <p class="jdes">职位描述</p>
                            <div class="job-text">
                                <p v-html="i.note"></p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="pro-list-right">
                <div v-for="(imgs,index) in yuying" :key="imgs" class="yyImg">
                    <img :src="imgs" alt="" @click="toOtherPages(index)">
                </div>
            </div>
        </div>
        <div v-if="showMsg == 1">
            <pages v-on:pageNum="pageIndexChange($event)" :totalpage="totalPages"/>
        </div>
        <div v-if="showMsg == 0">
            <pempty />
        </div>
    </div>
</template>
<script>
import pages from '../tool/pages.vue'
import {getProfessionList} from '../../api/profession'
import pempty from '../profession/pempty.vue'
export default {
    name:'professionList',
    data() {
        return {
            jobMsgList:[],
            jIndex:-1,
            totalPages:0,
            yuying:[
                require("../../assets/index/banner1.jpg"),
                require("../../assets/index/banner2.jpg")
            ],
            pageIndex:1,
            checkChange:{
                areaId: null,
                beginDate: null,
                eduId: null,
                endDate: null,
                expId: null,
                financeId: null,
                salaryMax: null,
                salaryMin: null,
                type: null,
                poiName:null
            },
            showMsg:1
        }
    },
    props:['checkdata'],
    watch: {
        checkdata:{ //深度监听，可监听到对象、数组的变化
            handler (newV, oldV) {
                this.checkChange = newV;
                this.pageIndex = 1
                getProfessionList(1,30,newV.areaId,newV.eduId,newV.expId,
                newV.fianceid,newV.salaryMax,newV.salaryMin,newV.poiName,newV.type,null,
                newV.beginDate,newV.endDate).then(res =>{
                    console.log(res.data);
                    this.jobMsgList = res.data.data;
                    if(this.jobMsgList.length == 0){
                        this.showMsg = 0;
                    }
                    else{
                        this.showMsg = 1;
                    }
                    let total = res.data.totalCount;
                    let addOne = total % 30;
                    if(addOne>0){
                        this.totalPages = parseInt(total/30) + 1;
                    }
                    else{
                        this.totalPages = parseInt(total/30);
                    }
                })
            },
            deep:true
        }
    },
    created() {
        getProfessionList(1,30,null,null,null,null,null,null,this.checkdata.poiName,this.checkdata.type).then(res =>{
            console.log(res.data);
            this.jobMsgList = res.data.data;
            let total = res.data.totalCount;
            let addOne = total % 30;
            if(addOne>0){
                this.totalPages = parseInt(total/30) + 1;
            }
            else{
                this.totalPages = parseInt(total/30);
            }
        })
    },
    components:{
        'pages':pages,
        'pempty':pempty
    },
    methods: {
        jobShow(index){
            this.jIndex = index;
            // console.log(this.jIndex)
        },
        jobHide(index){
            this.jIndex = -1;
            // console.log(this.jIndex)
        },
        pageIndexChange(pageIndex){
            getProfessionList(pageIndex,30,this.checkChange.areaId,this.checkChange.eduId,this.checkChange.expId,
                this.checkChange.fianceid,this.checkChange.salaryMax,this.checkChange.salaryMin,
                this.checkChange.poiName,this.checkdata.type,this.checkdata.beginDate,this.checkdata.endDate).then(res =>{
                console.log(res.data.data);
                this.jobMsgList = res.data.data;
                this.pageIndex = pageIndex;
            })
        },
        toJobDetail(index){
            this.$router.push({
                path:'/jobDetail',
                query: {
                    inPageIndex:index,
                    pages:this.pageIndex,
                    id:''
                } 
            })
        },
        toOtherPages(index){
            if(index == 0){
                this.$router.replace('/company')
            }
            else{
                this.$router.replace('/profession')
            }
        }
    },
}
</script>
<style>
#professionList{
    background-color: #F0F3F6;
    width: 1920px;
    padding-bottom: 38px;
}

#professionListbody{
    width: 1184px;
    margin: 0 auto;
}

.pro-list-left{
    display: inline-block;
    width: 884px;
    margin-right: 16px;
}

.pro-list-left .job-card{
    background-color: white;
    height: 130px;
    margin-top: 16px;
    position: relative;
}

.pro-list-left .job-card .job-card-top{
    height: 90px;
    padding: 24px 30px 22px 30px;
    box-sizing: border-box;
}

.jobName{
    color: #1958FB;
    font-weight: bold;
}

.pro-list-left .job-type-btn{
    font-size: 12px;
    display: inline-block;
    text-align: center;
    line-height: 20px;
    margin-left: 12px;
    width: 32px;
    height: 20px;
    border-radius: 2px;
}

.pro-list-left .part-time{
    border: 1px solid #FE9A2D;
    color: #FFA345;
}

.pro-list-left .un-job{
    border: 1px solid #26D0C3;
    color: #00C2B3;
}

.pro-list-left .job-card .job-card-top .jobSalary{
    color: #FD7C50;
    margin-right: 16px;
}

.jobDetail{
    color: #646A7E;
    font-size: 14px;
}

.pro-list-left .job-card-top .c-top-left{
    display: inline-block;
    /* 解决div并排错位 */
    vertical-align:top;
    width: 412px;
}

.pro-list-left .job-card-top .c-top-right{
    display: inline-block;
    /* 解决div并排错位 */
    vertical-align:top;
    width: 412px;
}

.pro-list-left .job-card-top .com-tx{
    width: 56px;
    height: 56px;
    background-color: white;
    display: inline-block;
    /* 解决div并排错位 */
    vertical-align:top;
    float: right;
    border-radius: 4px;
    border: 1px solid rgba(243,245,251,1);
}

.pro-list-left .job-card-top .com-tx img{
    width: 56px;
}

.pro-list-left .job-card-top .com-msg{
    display: inline-block;
    /* 解决div并排错位 */
    vertical-align:top;
}

.pro-list-left .job-card .job-card-bottom{
    background-color: #F9FCFF;
    overflow: hidden;
    padding: 13px 30px;
    box-sizing: border-box;
}

.job-card .job-card-bottom .job-require{
    color: #646A7E;
    font-size: 14px;
    /* line-height: 40px; */
    height: 16px;
    width: 382px;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
    display: inline-block;
    /* 解决div并排错位 */
    vertical-align:top;
}

.pro-list-right{
    display: inline-block;
    /* 解决div并排错位 */
    vertical-align:top;
}

.pro-list-right .yyImg{
    width: 147px;
    margin-bottom: 16px;
    margin-top: 16px;
}

.pro-list-right .yyImg img{
    width: 284px;
}

.job-name-detail{
    width: 500px;
    /* height: 314px; */
    position: absolute;
    z-index: 1000;
    top: 0;
    left: 384px;
    display: none;
    box-shadow: 0px 2px 12px 0px rgba(215, 220, 229, 0.5);
}

.jobDShow{
    display: block !important;
}

.job-name-detail .jon-name-top{
    height: 102px;
    background-color: #D7DCE5;
    padding:28px 24px;
    box-sizing: border-box;
}

.job-name-detail .jon-name-top .jname,.jdes{
    font-size: 16px;
    color: #273B4E;
    margin-bottom: 16px;
    font-weight: bold;
}

.job-name-detail .jon-name-top .cname{
    font-size: 14px;
    color: #99A0AB;
}

.job-name-detail .jon-name-bottom{
    background-color: white;
    /* height: 212px; */
    padding: 24px;
    box-sizing: border-box;
}

.job-name-detail .jon-name-bottom .job-text{
    color: #99A0AB;
    font-size: 14px;
    line-height: 22px;
}
</style>